<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 订单基础信息表格 -->
    <el-card class="box-card full-width-card">
      <div slot="header" class="clearfix">
        <span>订单基础信息</span>
      </div>
      <el-table
        v-loading="loading"
        :data="orderList"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
        height="600"
        highlight-current-row
        width="100%">
        <el-table-column type="selection" width="45" align="center" />
        <el-table-column label="订单编号" align="center" prop="id" width="80" show-overflow-tooltip />
        <el-table-column label="服务类型" align="center" prop="secondaryTitle" min-width="120" show-overflow-tooltip />
        <el-table-column label="选择的服务" align="center" prop="selectionService" min-width="150" show-overflow-tooltip />
        <el-table-column label="预约时间" align="center" prop="scheduledTime" width="160" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.scheduledTime, '{y}-{m}-{d} {h}:{i}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单金额" align="center" prop="amount" width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>¥{{ scope.row.amount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="员工姓名" align="center" prop="employeeName" width="100" show-overflow-tooltip />
      </el-table>
    </el-card>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 订单详情对话框 -->
    <el-dialog
      title="订单详情"
      :visible.sync="detailDialogVisible"
      width="400px"
      append-to-body
      class="order-detail-dialog"
      :close-on-click-modal="true"
      :close-on-press-escape="true">

      <!-- 头部状态信息 -->
      <div class="order-status-bar">
        <div class="status-line"></div>
        <div class="status-content">
          <i class="el-icon-check status-icon"></i>
          <span>{{ orderStatusText }}</span>
        </div>
      </div>

      <!-- 收货地址 -->
      <el-card class="box-card order-detail-card">
        <div slot="header" class="clearfix">
          <span>收货地址</span>
        </div>
        <div class="address-content">
          <div class="address-line"><span>用户名称</span> <span class="phone-mock">137*****179</span></div>
          <div class="address-line">{{ currentRow.street }}</div>
        </div>
      </el-card>

      <!-- 费用汇总 -->
      <el-card class="box-card order-detail-card">
        <div slot="header" class="clearfix">
          <span>费用汇总</span>
        </div>
        <div class="amount-summary">
            <span>商品总金额</span>
            <span>¥{{ currentRow.amount }}</span>
        </div>
      </el-card>

      <!-- 其他信息 (如果需要显示JSON中但图片未展示的字段) -->
      <el-card class="box-card order-detail-card" v-if="currentRow.id">
        <div slot="header" class="clearfix">
          <span>其他订单信息</span>
        </div>
        <div class="other-info-content">
          <div class="info-line">
            <span class="info-label">服务介绍:</span>
            <span class="info-value">{{ currentRow.showIntroduce }}</span>
          </div>
          <div class="info-line">
            <span class="info-label">员工姓名:</span>
            <span class="info-value">{{ currentRow.employeeName }}</span>
          </div>
          <div class="info-line info-image-line">
            <span class="info-label">服务图片:</span>
            <el-image
              style="width: 100px; height: 100px; border-radius: 4px; margin-left: 10px;"
              :src="currentRow.showPictures"
              :preview-src-list="[currentRow.showPictures]">
            </el-image>
          </div>
        </div>
      </el-card>

      <!-- 订单审核照片 -->
      <el-card class="box-card order-detail-card" v-if="currentRow.id">
        <div slot="header" class="clearfix">
          <span>订单审核照片</span>
        </div>
        <div class="pictures-content">
          <div v-if="picturesList.length === 0" class="no-pictures">
            <el-empty description="暂无审核照片" :image-size="80"></el-empty>
            <span style="color: red;">未审核</span>
          </div>
          <div v-else class="pictures-grid">
            <div v-for="picture in picturesList" :key="picture.id" class="picture-item">
              <el-image
                style="width: 100px; height: 100px; border-radius: 4px;"
                :src="picture.picture"
                :preview-src-list="[picture.picture]">
              </el-image>
            </div>
          </div>
          <div v-if="picturesList.length >=4" style="text-align: center; margin-top: 10px;">
            <span style="color: green;">审核通过</span>
          </div>
        </div>
      </el-card>

    </el-dialog>

    <!-- 添加或修改订单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="服务类型" prop="secondaryTitle">
          <el-input v-model="form.secondaryTitle" placeholder="请输入服务类型" />
        </el-form-item>
        <el-form-item label="选择的服务" prop="selectionService">
          <el-input v-model="form.selectionService" placeholder="请输入选择的服务" />
        </el-form-item>
        <el-form-item label="服务介绍" prop="showIntroduce">
          <el-input v-model="form.showIntroduce" type="textarea" placeholder="请输入服务介绍" />
        </el-form-item>
        <el-form-item label="预约时间" prop="scheduledTime">
          <el-date-picker clearable
            v-model="form.scheduledTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择预约时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="服务地址" prop="street">
          <el-input v-model="form.street" type="textarea" placeholder="请输入服务地址" />
        </el-form-item>
        <el-form-item label="订单金额" prop="amount">
          <el-input-number v-model="form.amount" :precision="2" :step="0.1" placeholder="请输入订单金额" />
        </el-form-item>
        <el-form-item label="员工ID" prop="employeeId">
          <el-input v-model="form.employeeId" placeholder="请输入员工ID" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listOrder, getOrder, delOrder, addOrder, updateOrder } from "@/api/order/order1"
import { listPicturesByOrderId } from "@/api/order/pictures"
import ImageUpload from "@/components/ImageUpload"
import { parseTime, resetForm } from "@/utils/ruoyi"
import { modal } from "@/utils/ruoyi"

export default {
  name: "Order",
  components: {
    ImageUpload
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 订单表格数据
      orderList: [],
      // 订单详情数据
      orderDetailList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        scheduledTime: null,
        secondaryTitle: null,
        employeeName: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        secondaryTitle: [
          { required: true, message: "服务类型不能为空", trigger: "blur" }
        ],
        selectionService: [
          { required: true, message: "选择的服务不能为空", trigger: "blur" }
        ],
        scheduledTime: [
          { required: true, message: "预约时间不能为空", trigger: "blur" }
        ],
        street: [
          { required: true, message: "服务地址不能为空", trigger: "blur" }
        ],
        amount: [
          { required: true, message: "订单金额不能为空", trigger: "blur" }
        ]
      },
      // 详情对话框显示状态
      detailDialogVisible: false,
      // 当前选中的行数据
      currentRow: {},
      // 照片列表
      picturesList: [],
    }
  },
  created() {
    this.getList()
  },
  computed: {
    orderStatusText() {
      // 订单状态(1.待支付  2.待服侍  3.服侍中  4.待评价  5.已完成  6.已取消 7.已退款)
      const statusMap = {
        1: '待支付',
        2: '待服侍',
        3: '服侍中',
        4: '待评价',
        5: '已完成',
        6: '已取消',
        7: '已退款'
      };
      return statusMap[this.currentRow.status] || '未知状态';
    }
  },
  methods: {
    /** 查询订单列表 */
    getList() {
      this.loading = true
      listOrder(this.queryParams).then(response => {
        this.orderList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        secondaryTitle: null,
        selectionService: null,
        showIntroduce: null,
        scheduledTime: null,
        street: null,
        showPictures: null,
        amount: null,
        employeeId: null,
        status: null,
        employeeName: null
      }
      this.resetForm("form")
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm")
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 查看详情按钮操作 */
    handleView(row) {
      this.orderDetailList = [row]
    },
    /** 点击行显示详情 */
    handleRowClick(row) {
      this.currentRow = row;
      this.detailDialogVisible = true;
      // 加载该订单的照片
      this.loadPictures(row.id);
    },

    /** 加载订单照片 */
    loadPictures(orderId) {
      listPicturesByOrderId(orderId).then(response => {
        this.picturesList = response.rows || [];
      }).catch(() => {
        this.picturesList = [];
      });
    },
  }
}
</script>

<style scoped>
/* 重置一些全局样式，确保对话框内的卡片样式不受影响 */
.el-card {
  margin-bottom: 10px; /* 卡片之间默认间距 */
}

.el-descriptions {
  margin: 0px; /* 默认不带外部margin */
}

.full-width-card {
  width: 100%;
}

/* 新增订单详情对话框样式 */
.order-detail-dialog .el-dialog__header {
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
  text-align: center;
}

.order-detail-dialog .el-dialog__title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.order-detail-dialog .el-dialog__body {
  padding: 0px; /* 移除默认body padding，让卡片自己控制 */
}

.order-status-bar {
  background-color: #f0f9eb; /* 浅绿色背景 */
  padding: 20px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 10px; /* 与下方卡片间距 */
}

.status-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(to right, #409EFF 50%, #e6a23c 50%); /* 模拟蓝色进度条，橙色占位 */
  /* 实际应该根据订单状态动态调整 */
}

.status-content {
  font-size: 18px;
  color: #67c23a; /* 绿色 */
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-icon {
  font-size: 24px;
  margin-right: 8px;
}

.order-detail-card {
  margin-bottom: 10px; /* 每个卡片底部间距 */
  border: none; /* 移除卡片边框，让内容更流畅 */
  box-shadow: none; /* 移除阴影 */
}

.order-detail-card .el-card__header {
  padding: 12px 20px;
  border-bottom: 1px solid #ebeef5;
  font-size: 15px;
  font-weight: bold;
  color: #303133;
  background-color: #ffffff;
}

.order-detail-card .el-card__body {
  padding: 15px 20px;
}

/* 收货地址样式 */
.address-content .address-line {
  font-size: 14px;
  color: #606266;
  line-height: 1.8;
}

.address-content .phone-mock {
  margin-left: 10px;
  color: #909399;
}

/* 费用汇总样式 */
.amount-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #303133;
  padding: 5px 0;
}

.amount-summary .summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #303133;
  padding: 5px 0;
}

.amount-summary .summary-item:last-child {
  border-top: 1px solid #ebeef5;
  margin-top: 10px;
  padding-top: 10px;
  font-weight: bold;
}

.amount-summary .summary-item span:first-child {
  color: #909399;
}

.amount-summary .discount-amount {
  color: #f56c6c; /* 红色 */
}

/* 其他信息模块样式 */
.other-info-content .info-line {
  display: flex;
  align-items: flex-start;
  margin-bottom: 8px;
  font-size: 14px;
  color: #606266;
}

.other-info-content .info-label {
  font-weight: bold;
  color: #303133;
  flex-shrink: 0;
  margin-right: 10px;
  width: 80px; /* 固定标签宽度 */
}

.other-info-content .info-value {
  flex-grow: 1;
  word-break: break-all; /* 自动换行 */
}

.other-info-content .info-image-line {
  align-items: center;
}

/* 照片相关样式 */
.pictures-content {
  min-height: 120px;
}

.no-pictures {
  text-align: center;
  padding: 20px 0;
}

.pictures-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.picture-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.picture-actions {
  margin-top: 5px;
}

.picture-item:hover .picture-actions {
  opacity: 1;
}
</style>
